<template>
  <div class="home">
    <div class="showPicture"><img ref="showpictures" alt="" /></div>
    <el-button type="primary" @click="dialogVisible = true">
      上传图片</el-button
    >
    <el-dialog title="显示图片" :visible.sync="dialogVisible" width="30%">
      <input type="file" @change="upload" ref="upload" />
      <div class="imgs">
        <img alt="" ref="image" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    upload() {
      const file = this.$refs.upload.files[0];
      console.log(file);
      const blob = window.URL.createObjectURL(file);
      this.$refs.image.src = blob;
    },
    submit() {
      this.dialogVisible = false;
      const file = this.$refs.upload.files[0];
      var files = new FormData();
      files.append("file", file,file.name);
      axios
        .post("http://localhost:3300/picture", files)
        .then((res) => {
          console.log(res);
          this.$refs.showpictures.src = res.data.url;
          console.log(this.$refs.showpictures);
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.showPicture {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  // margin: 0 auto;
  img{
    width: 100%;
    height: 100%;
  }
}
.imgs {
  width: 150px;
  height: 100px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
